<template>
  <div class="warp-header">
    <div class="padding-left"></div>
    <div class="warp-img">
      <img class="log_style" :src="require('../assets/img/Flogo.png')" />
    </div>
    <div class="padding-center"></div>
    <div class="warp-center">
      <ul class="df flex-center">
        <li class="hover-li active-line">
          <router-link to="/home">
            <img
              class="icon_style"
              :src="require('../assets/img/icon01.png')"
            />
            <a class="list-block"> Home </a>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <img
              class="icon_style"
              :src="require('../assets/img/icon02.png')"
            />
            <el-dropdown
              class="list-block"
              trigger="hover"
              placement="bottom-start"
            >
              <span class="el-dropdown-link">
                <a class="list-block" :class="headerName1 ? 'bbb' : 'ccc'">
                  Sequence Management
                </a>
              </span>
              <template #dropdown>
                <el-dropdown-menu style="font-weight: 600">
                  <el-dropdown-item
                    class="clearfix"
                    @click="toPlot('/designLibrary'), changeHeader1()"
                  >
                    <span style="font-size: 15px; padding: 3px 0px"
                      >Design Library</span
                    >
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click="toPlot('/requestManagement'), changeHeader1()">
                    <span style="font-size: 15px;padding: 3px 0px;">Sequence Registration</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <!--<el-dropdown-item class="clearfix" @click="toPlot('/volcano'), changeHeader1()">
                    <span style="font-size: 15px;padding: 3px 0px;">Sequence Approve</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>-->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <img
              class="icon_style"
              :src="require('../assets/img/icon03.png')"
            />
            <el-dropdown
              class="list-block"
              placement="bottom-start"
              trigger="hover"
            >
              <span class="el-dropdown-link">
                <a class="list-block" :class="headerName2 ? 'bbb' : 'ccc'">
                  Component Management
                </a>
              </span>
              <template #dropdown>
                <el-dropdown-menu style="font-weight: 600;">
                  <el-dropdown-item class="clearfix" @click="toPlot('/sequenceManagement'), changeHeader2()">
                    <span style="font-size: 15px;padding: 3px 0px;">Component Management</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click="toPlot('/sequenceImport'), changeHeader2()">
                    <span style="font-size: 15px;padding: 3px 0px;">Component Import</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <!--<el-dropdown-item class="clearfix" @click="toPlot('/geneManagement'),changeHeader2()">
                    <span style="font-size: 15px;padding: 3px 0px;">Sequence Design</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>-->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <img
              class="icon_style"
              :src="require('../assets/img/icon04.png')"
            />
            <a class="list-block"> System Management </a>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="spacer"></div>
    <div class="right-header">
      <div>
        <!--        <img :src="require('../assets/user.jpg')" />-->
      </div>
      <div style="width: 200px">
        <span class="p_style">Welcome, Sheng</span>
        <el-dropdown class="list-block" trigger="click">
          <span class="el-dropdown-link">
            <el-button
              circle
              color="rgba(145, 151, 244, 0)"
              style="color: white; position: absolute; top: -17px"
            >
              <el-icon><arrow-down-bold /></el-icon>
            </el-button>
          </span>
          <template #dropdown>
            <el-dropdown-menu style="width: 170px; font-weight: 600">
              <el-dropdown-item class="clearfix">
                <span style="font-size: 15px; padding: 3px 0px">Logout</span>
                <el-badge class="mark" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="padding-right"></div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { Loading, ArrowDownBold } from "@element-plus/icons-vue";
import router from "@/router";
export default {
  name: "HeaderDetail",
  components: {
    ArrowDownBold,
  },
  setup() {
    const activeIndex = ref("1");
    const headerList = ref([
      {
        name: "Home",
        icoUrl: require("../assets/img/icon01.png"),
        routerLink: "/home",
      },
      {
        name: "Data Analysis",
        icoUrl: require("../assets/img/icon02.png"),
        routerLink: "",
      },
      {
        name: "Data Management",
        icoUrl: require("../assets/img/icon03.png"),
        routerLink: "/experimentManagement",
      },
      {
        name: "System Management",
        icoUrl: require("../assets/img/icon04.png"),
        routerLink: "",
      },
    ]);
    const toPlot = (path) => {
      router.push(path);
    };
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath);
    };
    return {
      activeIndex,
      headerList,
      handleSelect,
      toPlot,
    };
  },
  data() {
    return {
      headerName1: false,
      headerName2: false,
    };
  },
  /*created () {
          if (this.$route.fullPath === "/designLibrary" ||
                  this.$route.fullPath === "/sequenceDesign" ||
                  this.$route.fullPath === "/mulSequenceDesign" ||
                  this.$route.fullPath === "/requestManagement" ||
                  this.$route.fullPath === "/addRequestRecord" ||
                  this.$route.fullPath === "/compoundSearch") {
            this.headerName1 = true;
            this.headerName2 = false;
          }
        if (this.$route.fullPath === "/experimentManagement" ||
                this.$route.fullPath === "/addExperimentRecord" ||
                this.$route.fullPath === "/experimentRecordDetails" ||
                this.$route.fullPath === "/compoundManagement" ||
                this.$route.fullPath === "/addCompoundManagement") {
          this.headerName1 = false;
          this.headerName2 = true;
        }
      },*/
  methods: {
    changeHeader1() {
      this.headerName1 = true;
      this.headerName2 = false;
    },
    changeHeader2() {
      this.headerName2 = true;
      this.headerName1 = false;
    },
  },
};
</script>
<style>
/**
      更改全局scope的样式问题
     */
.el-menu--popup {
  min-width: 96px;
}
</style>
<style lang="scss" scoped>
::v-deep {
  .el-menu--horizontal {
    border-bottom: none;
  }
}
</style>
<style scoped lang="scss">
.warp-header {
  position: sticky;
  top: 0;
  z-index: 201;
  width: 100%;
  display: flex;
  height: 80px;
  align-items: baseline;
  background-image: url("../assets/img/banner.jpg");
  & .padding-left {
    width: 6%;
  }
  & .warp-img {
    display: flex;
    align-items: center;
    width: 100px;
    height: 50px;
  }
  & .padding-center {
    width: 12px;
  }
  & .warp-center {
    /*display: flex;*/
    /*align-items: center;*/
    width: 71%;
    position: relative;
    top: -1px;
    left: 50px;
    & .flex-center li {
      margin-left: 30px;
      & .list-block {
        display: inline-block;
        color: #fff;
        font-weight: 600;
        font-size: 20px;
      }
    }
    & .hover-li {
      &:hover {
        .list-block {
          text-decoration: underline;
          text-underline-offset: 3px;
        }
      }
    }
  }
  & .spacer {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  & .right-header {
    /*display: flex;*/
    /*align-items: center;*/
    position: relative;
    top: -1px;
    text-align: end;
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin-right: 20px;
    }
    & .el-tooltip__trigger {
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
    }
  }
  & .padding-right {
    width: 105px;
  }
}
/*.active-line:nth-child(2) a {*/
/*    text-decoration: underline;*/
/*    text-underline-offset: 3px;*/
/*}*/
.bbb {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ccc {
}
.p_style {
  color: white;
  font-size: 18px;
  padding-right: 10px;
  font-weight: 600;
}
.icon_style {
  top: 3px;
  position: relative;
  padding-right: 5px;
}
.log_style {
  position: relative;
  top: 20px;
}
</style>
